<template>
  <textarea :value="value" @input="autosize($event)"></textarea>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: '100%'
    },
    minHeight: {
      type: String,
      default: '160px'
    }
  },
  computed: {
    minHeightNumber() {
      return this.minHeight.replace('px', '')
    }
  },
  mounted() {
    const tx = document.getElementsByTagName('textarea')[0]
    tx.style.width = this.width
    tx.style.height = this.minHeight
  },
  methods: {
    autosize(event) {
      const target = event.target

      if (target.scrollHeight > this.minHeightNumber) {
        target.style.height = target.scrollHeight + 'px'
      } else {
        target.style.height = this.minHeight
      }

      this.$emit('input', target.value)
    }
  }
}
</script>

<style scoped>
textarea {
  width: 100%;
  height: 160px;
  overflow-y: hidden;
}
</style>
